import React, {Component} from 'react';
import {Relax} from 'iflux2';
import {List, fromJS, Map} from 'immutable';

import {Form, Button, Table, Row, Col, Tag} from 'antd';
const CheckableTag = Tag.CheckableTag;
import Image from 'components/Image'
import AddressList from './address-list';
import OrderDetail from './order-detail';
import PayDetail from './pay-detail';

import noop from 'util/noop';
import classNames from 'classnames';
import {routerShape} from 'constant/PropTypes';

@Relax
export default class CreateTrade extends Component {
    static defaultProps = {
        tradeGoodsList: List(),
        marketingOrder: Map(),
        payTypes: List(),
        payTypeId: '',
        isCopy: false,
        choosePayType: noop,
        previous: noop
    }

    //路由跳转
    static contextTypes = {
        router: routerShape
    }


    constructor(props) {
        super(props);

        this.state = {}
    }


    render() {
        const {tradeGoodsList, payTypes, payTypeId, choosePayType, marketingOrder} = this.props;

        // (marketingOrder.get('presentPackageInfos') || List()).map(present=>{
        //     return present.get('skus').filter(sku=>!!sku.get('name') && !!sku.get('isCheck')).Map(sku=>sku.set('isGift', 1))
        // })


        let dataSource = tradeGoodsList.map(tradeGoods=>tradeGoods.get('goods')).toJS();

        (marketingOrder.get('presentPackageInfos') || List()).forEach(present=>{
            present.get('skus').filter(sku=>!!sku.get('name') && !!sku.get('isCheck')).forEach(sku=>dataSource.push(sku.set('isGift', 1).toJS()))
        })

        return (
            <div>
                <div className="order-submit">
                    <AddressList/>
                    <div className="choose-pay">
                        <div className="step-tit clearfix">
                            <h3>支付方式：</h3>
                            <div className="step-cont">
                                <Row className="pusht">
                                    <Col>
                                        {
                                            payTypes.map((payType, index)=>{
                                                return (
                                                    <CheckableTag key={index}
                                                                  checked={payType.get('payTypeId') == payTypeId}
                                                                  className="bd pay-way" onChange={()=>this.choosePayType(payType.get('payTypeId'))}>{payType.get('payTypeName')}</CheckableTag>
                                                )
                                            })
                                        }
                                    </Col>
                                </Row>
                            </div>
                        </div>
                    </div>
                    <Form>
                        <div className="buy-list">
                            <div className="step-tit clearfix">
                                <h3>确认订单信息：</h3>
                            </div>
                            <div className="step-cont">
                                <Table rowKey={record=>record.cartId}
                                       bordered
                                       pagination={false}
                                       columns={this.renderColumns()}
                                       dataSource={dataSource}/>
                            </div>
                        </div>
                        <OrderDetail/>
                        <PayDetail/>
                    </Form>
                </div>
                <div className="fixedSubmit">
                    <div className="t-center">
                        <Button type="ghost" onClick={this.previous}>上一步</Button>
                    </div>
                </div>
            </div>
        )
    }


    previous = ()=>{
        const {previous, isCopy} = this.props;
        if (isCopy) {
            this.context.router.goBack();
        }else {
            previous('goods');
        }
    }


    choosePayType(payTypeId) {
        this.props.choosePayType(payTypeId);
    }


    renderColumns() {
        const {marketingOrder} = this.props;
        return [
            {
                title: "商品清单",
                dataIndex: "goodInfo",
                width: 280,
                className:"bdr0",
                render:(v, record, index)=>{
                    let goods = record;
                    let priceClass = classNames('price', 't-grayer', {hide: goods.price == goods.levelPrice});
                    let src = !!goods.images ? goods.images[0] : '';
                    let isGift = record.isGift;

                    let content = null;
                    if (!!isGift) {
                        content = (
                            <Row>
                                <Col span={18}>
                                    <div className="order-goods-info">
                                        <img className="ant-table-row-img" src={record.image} alt={record.name}/>
                                        <p className="good-name" title={record.name}><span className="t-red">[赠品]</span>{record.name}</p>
                                    </div>
                                </Col>
                                <Col span={6}>
                                    <div className="goods-price t-right">
                                        <p className="real-price"><span>&yen;{0.00}</span></p>
                                    </div>
                                </Col>
                            </Row>
                        )
                    } else {
                        content = (
                            <Row>
                                <Col span={18}>
                                    <div className="order-goods-info">
                                        <Image width={70} height={70} className="ant-table-row-img" src={src} alt={goods.name}/>
                                        <p className="good-name" title={goods.name}>{goods.productName}</p>
                                        <p className="t-grayer">{fromJS(goods.itemSpecRelList || []).map((spec)=>spec.get('valKey')).join(' ')}</p>
                                    </div>
                                </Col>
                                <Col span={6}>
                                    <div className="goods-price t-right">
                                        <p className="real-price"><span>&yen;{(goods.levelPrice || 0).toFixed(2)}</span></p>
                                        <p className={priceClass}><del>&yen;{(goods.price || 0).toFixed(2)}</del></p>
                                    </div>
                                </Col>
                            </Row>
                        )
                    }

                    return {
                        children: <div className="order-goods-item">
                            {content}
                        </div>,
                        props: {
                            colSpan: 2,
                        },
                    }
                }
            },
            {
                title: "单价",
                width: 100,
                className:"ant-table-th-right",
                dataIndex: "payPrice",
                render:()=>{
                    return {
                        children:{},
                        props: {
                            colSpan: 0,
                        },
                    }
                }
            },
            {
                title: "数量",
                width: 150,
                className:"ant-table-th-center",
                dataIndex: "itemAmount",
                render:(v, record, index)=><div className="buy-num"><span className="t-center">{!!record.isGift ? record.quantity : record.buyCount}</span></div>
            },
            {
                title: "小计",
                width: 200,
                className:"ant-table-th-right",
                dataIndex: "total",
                render:(v, record, index)=>{
                    let total = 0;
                    if (!record.isGift) {
                        total = (record.levelPrice || 0)*(record.buyCount || 0);
                    }
                    return (
                        <span className="font-14">&yen;{total.toFixed(2)}</span>
                    )
                }
            }
        ]
    }
}